<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card shadow="never" style="margin: 10px 0 10px 10px">
          <div slot="header">
            <div style="margin: 10px 0">
              <el-button type="success" @click="add" v-permission="['btn_sysMenuAdmin_add']">新建菜单</el-button>
            </div>
          </div>
          <div class="tree_container">
            <el-tree
            default-expand-all
            :data="treedata"
            node-key="id"
            :props="{
              children: 'children',
              label: 'path',
            }"
            @node-click="handleNodeClick"
            :render-content="renderContent"
          ></el-tree>
          </div>
          
        </el-card>
      </el-col>
      <el-col :span="20">
        <vxe_table
          :options="options"
          @handleTableBtn="handleTableBtn"
          @init="initTreeData"
          ref="baseTable"
        >
        </vxe_table>
      </el-col>
    </el-row>

    <AddDialog ref="add" @success="success"></AddDialog>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import AddDialog from "./comps/addDialog.vue";
import fileIcon from "@/assets/404_images/file.png";
import fileItem from "@/assets/404_images/fileItem.png";
import { listAll,del } from "@/api/menu";
import { hasBtnAuth } from "@/utils";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    AddDialog,
  },
  data() {
    return {
      options: {
        id: "menutable",
        height:700,
        apiFn: listAll,
        hideSearch:true,
        treeConfig: {
          rowField: "id",
          childrenField: "children",
          expandAll: false,
        },
        fixedParams: {
          platform: 1,
        },
        columns: [
          {
            field: "name",
            title: "菜单标题",
            search: true,
            valueType: "input",
            treeNode: true,
          },
          { field: "id", title: "菜单ID" ,width:100},
          {
            field: "type",
            title: "菜单类型",
            search: true,
            valueType: "select",
            width:100,
            options: [
              {
                label: "菜单",
                value: 1,
              },
              {
                label: "按钮",
                value: 2,
              },
            ],
            type: "html",
            formatter: ({ row }) =>
              row.type == 1 ? '<span style="color:green">菜单</span>' : '<span style="color:red">按钮</span>',
          },
          { field: "path", title: "菜单路径" },
          { field: "component", title: "组件路径" },
          { field: "permCode", title: "权限编码" },
        ],
        btnWidth: 260,
        btnAlign:'right',
        btn: [
         
          {
            title: "删除",
            handleName: "handleDel",
            type: "danger",
            show:row=>!row.children && hasBtnAuth('btn_sysMenuAdmin_del')
          },
          {
            title: "编辑",
            handleName: "handleEdit",
            type:'success',
            show:row=>  hasBtnAuth('btn_sysMenuAdmin_edit')

          },
          {
            title: "添加",
            handleName: "handleAddChild",
            show: (row) => row.type != 2  && hasBtnAuth('btn_sysMenuAdmin_add')
          },
        ],
      },
      treedata: [
      
      ],
    };
  },
  methods: {
    initTreeData() {
      console.log('表格初始化')
      setTimeout(()=>{
        console.log(this.$refs.baseTable.tableData)
        this.treedata = this.$refs.baseTable.tableData;
      },100)
    },
    handleNodeClick(data) {
      console.log(data);
    },
    renderContent(h, { node, data, store }) {
      const isFolder = node.childNodes && node.childNodes.length > 0;
      return h(
        "div",
        {
          class: "tree-node-content",
          style: {
            display: "flex",
            alignItems: "center",
            padding: "2px 0",
          },
        },
        [
          // 文件夹/文件图标
          h("img", {
            src: "xxxx",
            attrs: {
              src: isFolder
                ? fileIcon // 文件夹图标
                : fileItem, // 文件图标
              alt: isFolder ? "文件夹" : "文件",
            },
            style: {
              width: "20px",
              height: "20px",
              marginRight: "8px",
              verticalAlign: "middle",
            },
          }),
          // 节点文本
          h(
            "span",
            {
              style: {
                verticalAlign: "middle",
              },
            },
            data.name
          ),
        ]
      );
    },
    handleAddChild(row) {
      this.$refs.add.open(null, row.id);
    },
    handleDel(row){
      this.$del({id:row.id},del)
    },
    handleEdit(row){
      this.$refs.add.open(row,row.parentId)
    }
  },
};
</script>



<style lang="scss" scoped>
.tree_container{
  height: 720px;
  overflow-y: auto;
}
</style>
